<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>展示 Excel 表格</title>
    <!-- 引入 SheetJS 库 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
</head>
<body>
    <!-- 文件选择器 -->
    <input type="file" id="fileInput">
    <!-- 用于展示表格 -->
    <div id="tableContainer"></div>

    <script>
        const fileInput = document.getElementById('fileInput');
        const tableContainer = document.getElementById('tableContainer');

        // 监听文件选择器的变化事件
        fileInput.addEventListener('change', function(e) {
            // 获取用户选择的第一个文件
            const file = e.target.files[0];
            if (file) {
                // 创建一个 FileReader 对象用于读取文件
                const reader = new FileReader();

                // 当文件读取完成后执行的回调函数
                reader.onload = function(event) {
                    // 将读取的结果转换为 Uint8Array 类型
                    const data = new Uint8Array(event.target.result);
                    // 使用 XLSX 库解析 Excel 文件
                    const workbook = XLSX.read(data, {type: 'array'});
                    // 假设读取第一个工作表
                    const firstSheetName = workbook.SheetNames[0];
                    const worksheet = workbook.Sheets[firstSheetName];
                    // 将工作表转换为 HTML 表格
                    const table = XLSX.utils.sheet_to_html(worksheet);
                    // 在页面上显示表格
                    tableContainer.innerHTML = table;
                };

            // 以 ArrayBuffer 格式读取文件
            reader.readAsArrayBuffer(file);
            }
        });
    </script>
</body>
</html>